<template>
  <div
    class="loginWrapper"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="loginDiv">
      <h2 class="title2">欢迎登录</h2>
      <div class="inputBox pr">
        <el-input v-model="par.name" placeholder="请输入账号"></el-input>
      </div>
      <div class="inputBox pr">
        <el-input
          :type="redisPwd ? 'text' : 'password'"
          v-model="par.pwd"
          maxlength="20"
          placeholder="请输入密码"
        ></el-input>
        <i
          :class="['icoeye', redisPwd ? '' : 'no']"
          @click="redisPwd = !redisPwd"
        ></i>
      </div>
     
      <p class="saveLogin">
        记住密码<el-checkbox v-model="loginInfo.saveType"></el-checkbox>
      </p>
      <el-button
        :class="['btnOK', par.name == '' || par.pwd == '' ? 'noClick' : '']"
        type="primary"
        @click="loginSubmit"
        >登录</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      redisPwd: false,
      loading: false,
      loginInfo: this.$store.getters.loginInfo,
      par: {
        name: this.$store.getters.loginInfo.name,
        pwd: this.$store.getters.loginInfo.pwd,
      },
    };
  },
  mounted() {
    // ^(?![\da-z]+$)(?![\dA-Z]+$)(?![\d!#$%^&*]+$)(?![a-zA-Z]+$)(?![a-z!#$%^&*]+$)(?![A-Z!#$%^&*]+$)[\da-zA-z!#$%^&*]{8,16}$   四种符号任取其三

    document.onkeydown = (e) => {
      // 46:delete,8:回退,13:回车键
      if (e.keyCode == 13) {
        if (this.par.name != "" && this.par.pwd != "") {
          this.loginSubmit();
        }
      }
      this.$store.dispatch("setLoginInfo", this.loginInfo);
    };
  },
  beforeDestroy() {
    document.onkeydown = "";
  },
  methods: {
    // 登录
    loginSubmit() {
      if (this.par.name == "") {
        this.$message.error("请输入登录名");
        return;
      }
      if (this.par.pwd == "") {
        this.$message.error("请输入登录密码");
        return;
      }

      if (this.par.name != "admin") {
        this.$message.error("账号未注册");
        return;
      }
      if (this.par.pwd != "admin123456") {
        this.$message.error("请输入正确的登录密码");
        return;
      }
      this.loading = true;
      setTimeout(() => {
        this.loading = false;

        this.loginInfo.name = "";
        this.loginInfo.pwd = "";

        // 是否要记住密码
        if (this.loginInfo.saveType) {
          this.loginInfo.name = this.par.name;
          this.loginInfo.pwd = this.par.pwd;
        }
        this.$store.dispatch("setLoginInfo", this.loginInfo);

        // 页面跳转
        this.$router.push({ path: "/home" });

        this.$message({
          type: "success",
          message: "登录成功",
          duration: 600,
        });
      }, 500);
    },
  },
};
</script>
<style scoped>
@import url("../assets/css/login.css");
</style>
